<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
</head>

<body class="bg">
	<div class="wrap-pd animated fadeInDown">
		<div class="main-content">
			<div class="main-description">
				<h1>忘记您的密码了？</h1>
				<div class="ipt-box">
					<span>输入您的邮箱</span>
					<input type="tel" name="" id="username" value="" />
					<p id="qqq">发送验证码</p>
					<span id="time">60</span>
				</div>
				<div class="ipt-box">
					<span>输入您的邮箱验证码</span>
					<div class="yzm">
						<input type="tel" name="" id="checkcode" value="" />
					</div>
				</div>
				<button type="button" class="btn" id="submit">提交</button>
			</div>
		</div>
	</div>
</body>

</html>
<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/public.js"></script>
<script src="../../js/dream-msg.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	productheader('body', 3, 1, 1);

	let tem = `	<a href=" /views/teacher/teachers.html"><span data-i18n-text="AnnualAvg">寻找老师</span></a>`

	$(".title-bar").empty().append(tem);
	$(".title-bar").css("height", "40px");
	$(".title-bar").css("marginLeft", "16px");
	$(".title-bar").css("borderLeft", "1px solid rgb(221 214 214)");

	$(".left-bar").hide();
	$(".apps").css("fontSize", "35px");
	$("#left-go").css("position", "relative");
	$("#left-go").css("left", "25px");

	productfooter('body', 4);
	// 预加载隐藏
	$(document).ready(function () {
		$("#time").fadeOut("slow").hide();
		$('#username').val(localStorage.getItem('fuser'));
	})

	// 得到验证码
	let codeboolean = '';

	//  判断是否注册 默认未登录
	let istrue = false;

	// 验证码切换
	$('#qqq').click(async function () {
		let username = $('#username').val();

		if (phonetest(username) || emailtest(username)) {

			let res, respone;

			if (phonetest(username)) {

				//  判断手机是否注册
				let close = Dreamer.loading("发送中,请稍后！");
				respone = await ajax('student_phone_existence', { 'phone': username }, 'post');


				// 发送手机验证码
				if (respone.data) {
					setTimeout(function () {

						close();

					}, 500)
					res = await ajax('verification_code', { 'phone': username }, 'get');
				} else {
					setTimeout(function () {

						close();
						Dreamer.warning('该账号未注册', 2000);

					}, 500)
					return false;
				}
			} else if (emailtest(username)) {
				//  判断邮箱是否注册
				let close = Dreamer.loading("发送中,请稍后！");
				respone = await ajax('student_mailbox_existence', { 'mailbox': username }, 'post');
				// 发送邮箱验证码
				if (respone && respone.msg == '已注册') {

					setTimeout(function () {
						close();
					}, 500)
					res = await ajax('sendEmail', { 'email': username }, 'get')

				} else {

					setTimeout(() => {
						close();
						Dreamer.warning('该账号未注册', 2000);
					}, 500)


					return false;
				}
				res = await ajax('sendEmail', { 'email': username }, 'get');
			}

			if (res.code == 200) {
				Dreamer.destroyAll();
				Dreamer.info('发送成功', 2000);
				// 得到验证码
				codeboolean = res.msg;

				let second = 60;
				$('#time').html(second);
				$('#qqq').hide();
				$('#time').show();
				clearInterval(ting);
				var ting = setInterval(() => {
					second--;
					localStorage.setItem('forgettime', second)
					if (localStorage.getItem('forgettime') && localStorage.getItem('forgettime') <= 0) {
						clearInterval(ting);
						localStorage.removeItem('forgettime')
						$('#qqq').show();
						$('#time').hide();
					} else {
						$('#time').html(localStorage.getItem('forgettime') + 's');
					}
				}, 1000)
			} else {
				Dreamer.warning('发送错误', 2000);
			}
		} else {
			Dreamer.warning('请填写账号', 2000);
		}
	})

	// 得到验证码进行校验
	$('#submit').click(async function () {
		let username = $('#username').val();
		let code = $('#checkcode').val();
		if (phonetest(username) || emailtest(username)) {

			if (code.length >= 4) {
				Dreamer.info('验证成功', 2000);
				setTimeout(() => {
					localStorage.setItem('curuser', username);
					window.location.href = 'updatepassword.html';
				}, 500)
			} else {
				Dreamer.warning('提交失败,验证码或者帐号有误', 2000);
			}
		} else {
			Dreamer.warning('提交失败,验证码或者帐号有误', 2000);
		}
	})
</script>
<style type="text/css">
	@import url("//at.alicdn.com/t/font_2896317_p7n63iyk1da.css");

	.bg {
		background-color: rgba(237, 239, 240, 1);
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.wrap-pd {
		width: 100%;
		height: auto;
		padding: 5% 0 15% 0;
	}

	.main-content {
		width: 35%;
		padding: 20px 30px;
		box-shadow: #EDEFF0 0px 0px 3px 1px;
		border: 1px solid #EDEFF0;
		background-color: #fff;
		border-radius: 6px;
		margin: auto;
		margin-top: 34px;
	}


	.main-description {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.main-description>h1 {
		width: 100%;
		margin-bottom: 25px;
	}

	.ipt-box {
		width: 65%;
		display: flex;
		align-items: center;
		margin-top: 24px;
		position: relative;
	}

	.ipt-box>span {
		width: 30%;
		white-space: nowrap;
		display: inline-block;
		color: #888888;
		font-size: 14px;
		position: relative;
		right: 10px;
	}

	.ipt-box>input {
		width: 80%;
		padding: 8px;
		box-sizing: border-box;
		margin-left: 15px;
		display: flex;
		flex: 1;
		border: 1px solid #CCCCCC;
		height: 30px;
	}

	.ipt-box>.yzm {
		margin-left: 15px;
		display: flex;
		flex: 1;
		border: 1px solid #CCCCCC;
		height: 30px;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: 8px;
		box-sizing: border-box;
		cursor: pointer;
	}

	.yzm>input {
		flex: 1;
		border: none;
		outline: none;
	}

	.ipt-box #qqq {
		width: auto;
		display: block;
		background-color: #5686E9;
		padding: 2px 10px;
		border-radius: 4px;
		color: #fff;
		position: absolute;
		right: -100px;
		cursor: pointer;

	}

	.ipt-box #time {
		width: auto;
		display: block;
		background-color: #CCCCCC;
		padding: 2px 10px;
		border-radius: 4px;
		color: #fff;
		position: absolute;
		right: -60px;
	}

	.btn {
		margin-top: 25px;
		width: 60%;
		color: #fff;
		border-radius: 6px;
		background-color: #5686E9;
		padding: 10px;
		border: none;
		outline: none;
	}
</style>